import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { viewUtils } from '@/utils/arcgis';
// import { CloseOutlined } from '@ant-design/icons';
import closebtnImg from '../images/关闭.png';
import MeasureLine3D from '@/components/widgets/Measurement3D/DirectLineMeasurement3D';
import MeasureArea3D from '@/components/widgets/Measurement3D/AreaMeasurement3D';
// 引入model
import { ConnectProps, ConnectState } from '@/models/connect';
import { MaptoolbarModelState } from '@/models/maptoolbar';
import AutoHeightScroller from '@/components/containers/autoHeightScroller';
import styles from './index.less';
import line from './images/距离测量.png';
import area from './images/面积测量.png';
import cls from 'classnames';
import { CloseSquareOutlined } from '@ant-design/icons';

interface MapToolbarPropTypes extends ConnectProps {
  maptoolbar: MaptoolbarModelState;
  style?: React.StyleHTMLAttributes<HTMLDivElement>;
  onClose: () => {};
  dispatch;
}
const Measure3Dbutton: React.FC<MapToolbarPropTypes> = props => {
  // const Measure3Dbutton = ({ dispatch, maptoolbar }) => {
  const { maptoolbar, style, onClose, dispatch } = props;

  function renderContent() {
    switch (maptoolbar.deactivate) {
      case 'line': {
        return <MeasureLine3D />;
      }
      case 'area': {
        return <MeasureArea3D />;
      }
      default:
        break;
    }
    return null;
  }

  function linemeasure() {
    console.log(maptoolbar.deactivate);
    dispatch({
      type: 'maptoolbar/measureSwitchModel',
      payload: 'line',
    });
    console.log(maptoolbar.deactivate);
  }

  function areameasure() {
    console.log(maptoolbar.deactivate);
    dispatch({
      type: 'maptoolbar/measureSwitchModel',
      payload: 'area',
    });
    console.log(maptoolbar.deactivate);
  }

  return (
    <div className={cls('base-panel', styles.measure3DPanel)}>
      <div className="base-panel-title">
        <span>测量</span>
        <span className="base-panel-title-btn">
          <CloseSquareOutlined onClick={onClose} />
        </span>
      </div>
      <div className="base-panel-body" style={{ padding: '15px', height: 'auto' }}>
        <div className={styles.measuretalk}>通过单击场景以放置您的第一个点来开始测量</div>
        <div className={styles.switchbutton}>
          <div className={styles.switchRadio}>
            <span
              className={
                maptoolbar.deactivate === 'line' ? styles.switchRadioSpan1 : styles.switchRadioSpan2
              }
              onClick={linemeasure}
            >
              <img className={styles.imgIcon} src={line} alt="" /> 距离测量
            </span>
            <span
              className={
                maptoolbar.deactivate === 'area' ? styles.switchRadioSpan1 : styles.switchRadioSpan2
              }
              onClick={areameasure}
            >
              <img className={styles.imgIcon} src={area} alt="" /> 面积测量
            </span>
          </div>
        </div>
        <div className={styles.panelContent}>{renderContent()}</div>
      </div>
    </div>
  );
};

export default connect(({ maptoolbar }: ConnectState) => {
  return {
    maptoolbar,
  };
})(Measure3Dbutton);
